<template>
  <div class='container' >
    <!-- 对话框 -->
    <el-dialog
  title="题目预览"
  :visible.sync="dialogVisible"
  width="60%"
  :before-close="handleClose">
  <span>
    <questionsPreview :topic="topic"></questionsPreview>
  </span>
  <span slot="footer" class="dialog-footer" style="text-align: right">
    <el-button type="primary" @click="dialogVisible = false" >关 闭</el-button>
  </span>
</el-dialog>
<!-- 搜索编号 -->
      <el-form inline class="demo-form-inline" size="small">
    <el-form-item label="关键字">
      <el-input v-model="keyword" placeholder="根据编号搜索"></el-input>
    </el-form-item>

    <el-form-item style="float: right;">
      <el-button @click="keyword=null" >清除</el-button>
      <el-button type="primary" @click="search()" >搜索</el-button>
    </el-form-item>
  </el-form>
  <!-- 警示框 -->
  <el-alert
    :title="` 数据一共 ${counts} 条`"
    :closable="false"
    type="info"
    show-icon
    close-text>
  </el-alert>
  <!-- 表格数据 -->
  <el-table
      :data="tableData"
      style="width: 100%"
      >
      <el-table-column
        prop="id"
        label="编号"
        width="220">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="80">
      </el-table-column>
      <el-table-column
      label="题目编号"
      width="220">
      <template #default="{ row }">
        <!-- 点击显示对话框 -->
          <el-button type="text" @click="dialog(item.id)"  v-for="(item,index) in row.questionIDs" :key="index">{{ item.number }}</el-button>
        </template>
        </el-table-column>
      <el-table-column
        prop="addTime"
        label="录入时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="totalSeconds"
        label="答题时间(s)"
        width="166">
      </el-table-column>
      <el-table-column
        prop="accuracyRate"
        label="正确率(%)"
        width="166">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="录入人"
        width="166">
      </el-table-column>
      <el-table-column
        label="操作"
        width="80">
        <template #default="{ row }">
          <!-- 点击删除 -->
          <el-button   @click="open(row)" type="danger" icon="el-icon-delete" circle size="small "></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
<div class="right">

  <el-pagination
  style="float: right;"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :page-size="10"
    :page-sizes="[20, 30, 50, 100]"
    layout=" sizes, prev, pager, next, jumper"
    :total="+counts">
  </el-pagination>
</div>
  </div>
    </div>

</template>

<script>
import questionsPreview from '../components/questions-preview.vue'
import { randoms, removeRandoms, detail } from '../../api/hmmm/questions'
export default {
  components: {
    questionsPreview
  },
  data () {
    return {

      dialogVisible1: false,
      dialogVisible: false,
      // 学科名字关键字
      keyword: null,
      // 页码
      page: 1,
      // 尺寸
      pagesize: 20,
      tableData: [],
      counts: 0,
      topic: ''

    }
  },
  methods: {
    // 获取题目详情
    async dialog (id) {
      console.log(id)
      this.dialogVisible = true
      const res = await detail({ id: id })
      console.log(res.data)
      this.topic = res.data
    },
    handleClose () { this.dialogVisible = false },
    // 发送请求删除组题
    async open (data) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        await removeRandoms(data)

        this.getCreation()
      }).catch(() => {

      })
    },
    // 关键字搜索组题
    search () {
      this.getCreation()
    },
    // 组题分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.getCreation()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getCreation()
    },
    // 获取组题列表
    async getCreation () {
      const res = await randoms({
        keyword: this.keyword,
        page: this.page,
        pagesize: this.pagesize

      })
      this.tableData = res.data.items
      this.counts = res.data.counts
      // 判断显示题型
      this.tableData.map((item) => {
        if (item.questionType === '1') { item.questionType = '单选' } else if (item.questionType === '2') { item.questionType = '多选' } else {
          item.questionType = '简答'
        }
      })
    }
  },
  created () {
    // 发送请求获取题组数据
    this.getCreation()
  }
}
</script>

<style scoped >
*{box-sizing: border-box;}
.container{
  padding: 20px;
  margin: 10px;
  background-color: #fff;
}
.has-gutter{
  border-bottom: 2px solid #e8e8e8;
  color: #909399;
  padding: 10px 0;
  background-color: #fafafa;
}
.el-alert--info{
  margin-bottom: 15px;
}
.block{margin-top: 20px;}
.el-button--text{padding: 0;
margin: 0;}
.right{height: 32px;}
</style>
